<template>
	<!-- 文件空间 -->
	<dx-layer
		title="图片空间"
		v-model="showLayer"
		@close="modalClose"
		:loading="uploadLoading"
		:mask="mask"
		@cancel="modalClose"
		@confirm="confirm"
		className="dx-image-space"
	>
		<view class="flex justify-between select-upload">
			<div class="left">
				<dx-left-search
					v-if="showLayer"
					:buttons="buttons"
					:urls="props.groupUrls"
					:funcName="props.funcName"
					:defaultId="group_id"
					@change="change"
					@toolClick="toolClick"
				></dx-left-search>
			</div>
			<div ref="withoutRef" class="right flex-grow ml-5px">
				<el-scrollbar v-loading="loading" @scroll="scroll">
					<div ref="innerRef" class="flex flex-wrap pr-15px">
						<view class="item mt-15px ml-14px" v-for="item in fileList" :key="item._id" @click="selectImage(item)">
							<image v-if="type === 'image'" class="space-item" mode="aspectFit" :src="item.url"></image>
							<view v-else class="space-item flex justify-center items-center">
								<dx-icon :name="type === 'video' ? 'video' : type === 'audio' ? 'audio-file' : 'file-addition-one'" size="40"></dx-icon>
							</view>
							<image class="active" v-show="item.checked === true" src="@/uni_modules/dx-admin/static/select.png" mode="aspectFit"></image>
							<view class="shade flex items-center justify-center">
								<dx-icon name="preview-open" size="24" color="#ffffff" @click="previewFile(item)"></dx-icon>
							</view>
						</view>
					</div>
					<el-empty description="暂无数据～" v-if="!fileList.length" />
				</el-scrollbar>
			</div>
			<!-- 预览的加载 -->
			<el-image-viewer
				v-if="showImageViewer"
				:initial-index="initialIndex"
				:url-list="[previewUrl]"
				@close="showImageViewer = false"
			></el-image-viewer>
		</view>
	</dx-layer>
</template>
<script setup lang="ts" name="DxSelectUpload">
import { ref, watch } from 'vue';
import { multiUpload, axios } from '@/uni_modules/dx-admin/api/index';
const props = withDefaults(
	defineProps<{
		modelValue: any;
		limit?: number;
		groupUrls?: any;
		extension?: string[];
		url?: string;
		funcName?: string;
		mask?: boolean;
		type?: string;
	}>(),
	{
		limit: 1,
		funcName: 'dx-func-admin',
		groupUrls: {
			add: 'resourceGroup/add',
			index: 'resourceGroup/list',
			edit: 'resourceGroup/edit',
			del: 'resourceGroup/del',
		},
		url: 'resource/index',
		mask: true,
		type: 'image',
	}
);
const buttons = ['refresh', 'add', 'upload'];
const showImageViewer = ref(false);
const initialIndex = ref(0);
const previewUrl = ref('');
// 绑定关系
const $emit = defineEmits(['update:modelValue', 'close', 'confirm']);
function modalClose() {
	$emit('update:modelValue', false);
	$emit('close');
}
const showLayer = ref(false);
const loading = ref(false);
const uploadLoading = ref(false);
const group_id = ref('');
const fileList = ref<any[]>([]);
const page = ref(1);
const total = ref(0);
const innerRef = ref<any>();
const withoutRef = ref<any>();
watch(
	() => props.modelValue,
	(newProps) => {
		if (newProps) {
			showLayer.value = newProps;
			page.value = 1;
			getList();
		}
	},
	{
		immediate: true,
	}
);
/**
 * 获取列表
 * @param isUpdate 是否是更新
 */
function getList(isUpdate = false) {
	loading.value = true;
	axios
		.send(props.url, props.funcName, {
			page: page.value,
			size: 50,
			group_id: group_id.value,
			type: {
				op: 'like',
				value: props.type,
			},
		})
		.then((res) => {
			let list = res.data.list;
			list.map((item: any) => {
				item.checked = false;
			});
			if (isUpdate === true) {
				list = [...fileList.value, ...list];
			}
			fileList.value = list;
			total.value = res.data.total;
		})
		.finally(() => {
			loading.value = false;
		});
}
// 滚动加载
function scroll({ scrollTop }: any) {
	// 滚动到底部
	if (innerRef.value?.clientHeight - withoutRef.value?.clientHeight - scrollTop <= 10) {
		if (fileList.value.length < total.value && loading.value === false) {
			page.value++;
			getList(true);
		}
	}
}
// 切换分组
function change(val: any) {
	group_id.value = val._id;
	getList();
}
function toolClick() {
	const params: any = {
		count: props.limit, //默认9
	};
	if (props.type === 'image') {
		params.type = 'image';
	} else if (props.type === 'video') {
		params.type = 'video';
	} else {
		let extension = props.extension || [];
		if (!extension.length) {
			if (props.type === 'audio') {
				extension = ['.m4a', '.mp4', '.3gp', '.wav', '.wma', '.mp3'];
			} else {
				// 其他文件
				extension = ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.zip', '.rar', '.7z', '.apk'];
			}
		}
		params.extension = extension;
		console.log(extension);
	}
	uni.chooseFile({
		...params,
		success: function (res: any) {
			uploadLoading.value = true;
			multiUpload(res.tempFiles, { group_id: group_id.value })
				.then(() => {
					getList();
				})
				.finally(() => {
					uploadLoading.value = false;
				});
		},
	});
}
// 选择图片
function selectImage(item: any) {
	if (props.limit === 1) {
		fileList.value.map((item) => {
			item.checked = false;
		});
	} else if (fileList.value.filter((item) => item.checked === true).length >= props.limit) {
		return;
	}
	item.checked = !item.checked;
}
function previewFile(item: any) {
	if (props.type === 'image') {
		showImageViewer.value = true;
		previewUrl.value = item.url;
	} else {
		window.open(item.url);
	}
}
// 确认
function confirm() {
	let urls = fileList.value.filter((item) => item.checked === true).map((item) => item.url);
	$emit('confirm', urls);
	modalClose();
}
</script>
<style lang="scss" scoped>
.select-upload {
	height: calc(100% - 10px);
}
.left {
	width: 240px;
	background-color: #ffffff;
	height: 100%;
	.top {
		border-bottom: 1px solid #ebeef5;
	}
	.content {
		height: calc(100% - 35px);
	}
	&::v-deep {
		.left-search .content {
			height: calc(100% - 40px);
		}
	}
}
.right {
	width: calc(100% - 240px);
	position: relative;
	height: 100%;
	.item {
		width: 112px;
		height: 112px;
		position: relative;
		background-color: #f4f6f8;
		border: 1px solid #ebeef5;
		.active {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 30px;
			height: 30px;
			z-index: 100;
		}
		.shade {
			z-index: 10;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: none;
			cursor: pointer;
		}
		&:hover {
			.shade {
				display: flex;
			}
		}
		.space-item {
			width: 100%;
			height: 100%;
		}
	}
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -5px;
		width: 5px;
		height: 100%;
		background: #f4f6f8;
	}
}
</style>
